<template>
  <filter-products @filtering="_show"></filter-products>
  
  <el-table :data="productList" stripe style="width: 100%" v-loading="loading">
    <el-table-column prop="id" label="编号" width="100px" />
    <el-table-column prop="name" label="产品名称" />
    <el-table-column prop="brand" label="所属品牌" width="100px" />
    <el-table-column prop="price" label="售价" width="100px" />
    <el-table-column prop="stock" label="库存" width="100px" />
    <el-table-column prop="production_date" label="生产日期" />
    <el-table-column label="分类" width="200px">
      <!-- 作用域插槽 -->
      <template #default="{ row }">
        {{ getCategoryPath(row.categoryId).map(item => item.name).join("|") }}
      </template>

    </el-table-column>>
    <el-table-column label="操作">
      <!-- 作用域插槽!   scope:是一个对象   const {row,$index}=scope -->
      <template #default="{ row }">

        <el-button size="small" type="success" @click="showDetail(row)">详情</el-button>
      </template>

    </el-table-column>

  </el-table>
  <!-- 分页：总数， 页码切换 -->
  <el-pagination small background layout="prev, pager, next" :total="total" class="mt-4" v-model:page-size="pageNum"
    v-model:current-page="pages" />

    
</template>

<script setup>
import FilterProducts from './FilterProducts.vue';
import { useProducts } from '@/hooks/products';
import { useCategory } from "@/hooks/category.js"

const { getCategoryPath } = useCategory();

const { _show,
  showDetail,
  pages,
  pageNum,
  total,
  loading,
  productList } = useProducts();



</script>